<template lang="html">
    <div class="image-detail">
        <myHeader>
            <div class="submit">
                <span @click="addEventType">确定</span>
            </div>
        </myHeader>
        <div class="image-container">
            <img class="image-ele" :src="imageSrc" alt="">
        </div>
        <div class="form-item-container">
            <x-textarea placeholder="请输入你对图片的想法" :rows="5" v-model="detail" ></x-textarea>
        </div>
    </div>
</template>

<script>
import { XTextarea } from 'vux'
export default {
    data(){
        return {
            imageSrc: '',
            detail: '',
            index: 0,
            imageId: 0
        }
    },
    components: {
        XTextarea
    },
    created(){
        this.imageSrc = this.$route.query.path
        this.index = this.$route.query.index
        this.imageId = this.$route.query.imageId
    },
    methods: {
        addEventType(){
            sessionStorage.setItem('detail', JSON.stringify({
                detail: this.detail,
                index: this.index
            }))

            this.$api.post('/diary/add-image-remark', {
                id: this.imageId,
                remark: this.detail
            }).then(res => {
                if (res) {
                    let text = '添加成功！'
                    this.$vux.toast.show({
                        text: text
                    })
                    this.$router.go(-1)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .image-detail{
        .image-container{
            text-align: center;
            padding: .2rem 0;
            .image-ele{
                width: 80%;
            }
        }
        .submit{
            font-size: .16rem;
            text-align: right;
            padding-right: .1rem;
        }
        .form-item-container{
            padding: .1rem;
            background: #fff;
        }
    }
</style>
